<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>校园新闻收集系统</title>
        <meta name="description" content="校园新闻收集系统">
        <meta name="keywords" content="校园新闻收集系统">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">


        <!-- Theme included stylesheets -->
        <link href="../plugins/quill/quill.snow.css" rel="stylesheet">
        <link href="../plugins/quill/quill.bubble.css" rel="stylesheet">

        <!-- Core build with no theme, formatting, non-essential modules -->
        <link href="../plugins/quill/quill.core.css" rel="stylesheet">
        <!-- Main Quill library -->
        <script src="../plugins/quill/quill.js"></script>
<!--        <script src="../plugins/quill/quill.core.js"></script>-->
   
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1 aria-label="center">校园新闻收集系统</h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
                    
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        
                        <template>
                            <!-- 下拉选框 -->
                            <el-select v-model="value" placeholder="请选择高校" @change="selectGet">
                              <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </template>

                        <el-button type="primary" class="butT" @click="getBySid()" v-loading.fullscreen.lock="fullscreenLoading">点击抓取</el-button>
                        <el-input placeholder="输入新闻标题或学校名搜索" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                        <el-button @click="findSearchPage()" type="primary" class="dalfBut">查询</el-button>
                        <el-button @click="deleteSelection()" type="danger" class="dalfBut">删除所选行</el-button>
                    </div>

                        
                    <el-table  size="small" current-row-key="id" :data="dataList" stripe highlight-current-row @selection-change="handleSelectionChange">
                        <el-table-column
                                type = 'selection'
                                label="是否选中"
                                width="45"
                                prop="nId">
                        </el-table-column>
<!--                        <el-table-column label="id" align="center" prop="id" v-if="false" ></el-table-column>-->
                        <el-table-column label="链接" align="center" prop="href" v-if="false" ></el-table-column>
                        <el-table-column label="分类" align="center" prop="category" ></el-table-column>
                        <el-table-column label="新闻标题" align="center" prop="title" ></el-table-column>
                        <el-table-column label="作者" align="center" prop="author"></el-table-column>                    
                        <el-table-column label="内容预览" show-overflow-tooltip align="center" prop="description"></el-table-column>
                        <el-table-column label="新闻来源" align="center" prop="schoolName"></el-table-column>
                        <el-table-column label="发表时间" align="center" prop="putDate"></el-table-column>
                        <el-table-column label="爬取时间" align="center" prop="getDate"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
<!--                                <a href="http://www.baidu.com">跳转</a>-->
                                <el-button type="primary" size="mini" prop="href"  @click="gotoHref(scope.row)">查看新闻详情</el-button>
<!--                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增" :visible.sync="dialogFormVisible">
                                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                        <el-row>
                                            <el-col >
                                                <el-form-item label="名称" prop="name">
                                                    <el-input  v-model="formData.name"/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col >
                                                <el-form-item label="路径" prop="path">
                                                    <el-input  v-model="formData.path"/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col >
                                                <el-form-item label="描述" prop="description">
                                                    <el-input  v-model="formData.description"/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="编辑" :visible.sync="dialogFormVisibleEdit">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col >
                                        <el-form-item label="名称" prop="name">
                                            <el-input  v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col >
                                        <el-form-item label="路径" prop="path">
                                            <el-input  v-model="formData.path"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col >
                                        <el-form-item label="描述" prop="description">
                                            <el-input  v-model="formData.description"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>


    <script src="../plugins/quill/vue-quill-editor.js"></script>
    <script>

        var vue = new Vue({
            el: '#app',
            data:{
                activeName:'first',
                options: [{
                                    id: 1,
                                    label: '南京中医药大学'
                                  }, {
                                    id: 2,
                                    label: '南京邮电大学'
                                  }, {
                                    id: 3,
                                    label: '南京师范大学'
                                  }, {
                                    id : 4,
                                    label: '南京体育学院'
                                  },
                                  {
                                    id : 5,
                                    label: '南京审计大学'
                                  },
                                   {
                                    id : 6,
                                     label: '南京信息工程大学'
                                   }],
                                  value: '',

                editorOption:{
                    theme: 'snow',
                    boundary: document.body,
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{ 'header': 1 }, { 'header': 2 }],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'script': 'sub' }, { 'script': 'super' }],
                            [{ 'indent': '-1' }, { 'indent': '+1' }],
                            [{ 'direction': 'rtl' }],
                            [{ 'size': ['small', false, 'large', 'huge'] }],
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'font': [] }],
                            [{ 'align': [] }],
                            ['clean'],
                            ['link', 'image', 'video']
                        ]
                    },
                    placeholder: 'Insert text here ...',
                    readOnly: false
                },
                pagination: {//分页相关模型数据
					  currentPage: 1,//当前页码
					  pageSize:10,//每页显示的记录数
					  total:0,//总记录数
					  queryString:null,//查询条件
                      sId:0//学校id
				},
                nIds:[],
				dataList: []
            ,//当前页要展示的分页列表数据
                subjectList: [],
                tableData: {},
                fbChoiceList: [{
                   content: "",
                }],
                fullscreenLoading: false,
                formData: {
                },//表单数据
                dialogFormVisible: false,//增加表单是否可见
                dialogFormVisibleEdit:false,
                rules: {//校验规则
                    tagName: [{ required: true, message: '必填项', trigger: 'blur' }],
                }

            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                //初始化后自动分页查询
                this.findPage();
            },
            methods: {
                selectGet(vId){
                    let obj = {};
                    obj = this.options.find((item)=>{//这里的options就是上面遍历的数据源
                        return item.id === vId;//筛选出匹配数据
                    });
                    this.pagination.sId=obj.id;//复制给id
                    console.log(obj.label);//我这边的label就是对应高校名
                    console.log(obj.id);
                },
                openFullScreen() {
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    }, 1500);//等待1.5s
                },
                getBySid(){
                    if(this.pagination.sId==null){
                        alert("请选择一个学校进行爬取");
                        return;
                    }
                    //通过下拉框获取到学校的id 对后端发起请求抓取数据
                    //点击爬取之后需要一顶的时间进行等待
                    this.openFullScreen();
                    axios.get("/news/getBySid/"+this.pagination.sId,).then((res)=>{
                        if (res.data.success){
                            //发起请求,抓取
                            //并且存入数据库,
                            //并分页要展现出数据
                            alert(res.data.msg);//弹出提示信息
                            this.findPage();//展示信息
                        }
                    })
                },

                handleSelectionChange:function(val) {
                    console.log(val);
                    //多选框选中
                    this.nIds=new Array();
                    for(var i=0;i<val.length;i++){
                        this.nIds.push(val[i].nid);
                    }
                },
                deleteSelection(){
                    //删除所选行
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("/news/delete",this.nIds).then((res)=>{
                            if (res.data.success){
                                alert(res.data.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                },
                findSearchPage(){
                    this.pagination.currentPage = 1;
                    this.findPage();
                },
                //分页查询
                findPage() {
                    axios.post("/news/list",this.pagination).then((res)=>{
                        if (res.data.success){
                            // if (this.pagination.currentPage==1)alert(res.data.msg)

                            this.dataList = res.data.data.list;
                            this.pagination.total = res.data.data.total;
                        }
                    }).catch((error)=>{
                        if (error == "Error: Request failed with status code 403"){
                            this.$message.error("无操作权限");
                        }
                    });
                },
                // 重置表单
                resetForm() {
                    this.formData = {};
                    this.subjects = [];
                    this.tableData = {};
                },
                gotoHref(row){
                    //跳转到新闻详情页
                    window.open(row.href);
                },
                // 弹出编辑窗口
                handleUpdate(row) {
                    this.resetForm();
                    this.dialogFormVisibleEdit = true;
                    this.formData = row;
                },
                //切换页码
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },

            }
        });
        Vue.use(window.VueQuillEditor);
    </script>
</html>